<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    style="width: 90%"
    status-icon
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="修改密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input v-model="ruleForm.checkPass" type="password" />
    </el-form-item>
    <el-form-item label="个人简介">
      <el-input v-model="ruleForm.textarea" type="textarea" />
    </el-form-item>
    <el-form-item label="上传头像" prop="name">
      <el-upload
        ref="upload"
        class="avatar-uploader"
        limit="1"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="onchange"
      >
        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button @click="updata" type="primary"> 更新 </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { updataUser } from "@/request/home/userapi.js";
import { compile, computed, reactive, ref, watch } from "vue";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import { useStops } from "element-plus/es/components/slider/src/composables";
import { useStore } from "../../../stores/counter";
const Store = useStore();
const NowLoginuser = computed(() => Store.NowLoginuser);

const upload = ref();
const imageUrl = ref("");

const onchange = (rawFile) => {
  if (rawFile.raw.type !== "image/jpeg") {
    ElMessage.error("图片必须是JPG类型");
    console.log(upload.value.clearFiles());
  } else if (rawFile.raw.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小超过2MB");
    console.log(upload.value.clearFiles());
  } else ruleForm.file = rawFile.raw;
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (ruleForm.checkPass !== "") {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validateField("checkPass", () => null);
  }
  callback();
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value !== ruleForm.password) {
    callback(new Error("两个密码不一样"));
  } else {
    callback();
  }
};

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  username: Store.NowLoginuser.username,
  password: "",
  checkPass: "",
  textarea: "",
  file: null,
});

const rules = reactive({
  username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
});
const updata = () => {
  ruleFormRef.value.validate(async (test) => {
    if (test) {
      const params = new FormData();
      params.append("username", ruleForm.username);
      params.append("password", ruleForm.password);
      params.append("checkPass", ruleForm.checkPass);
      params.append("textarea", ruleForm.textarea);
      params.append("file", ruleForm.file);
      const result = await updataUser(params);
      if (result.data.code === 400)
        ElMessage({
          message: result.data.msg,
          type: "success",
        });
      else {
        Store.NowLoginuser = result.data.result;
        ElMessage({
          message: result.data.msg,
          type: "error",
        });
      }
    }
  });
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>